<template>
  <div class="goodCon">
    <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
      offset="500"> -->

    <waterfall :col="2" :data="goodsList" @loadmore="loadmore">
      <div
        class="goodBox"
        v-for="item in goodsList"
        :key="item.id"
        @click="goDetails(item.id, item.goods_status)"
      >
        <div class="boxImg">
          <img :src="item.url1" alt="" />
        </div>
        <div class="boxText">
          <p class="p1">{{ item.goods_name }}</p>
          <p class="p2">
            <span>￥{{ item.price }}</span
            ><em
              :class="
                item.goods_status == 10 &&
                item.active.end >= timeCurrent &&
                  item.active.start <= timeCurrent
                  ? ''
                  : 'curr'
              "
              >{{ item.goods_status == 10 ? "立即购买" : "售罄" }}</em
            >
          </p>
        </div>
      </div>
    </waterfall>
    <!-- </van-list> -->
    <div v-if="showFlag" class="noMore">没有更多了</div>
  </div>
</template>

<script>
import Vue from "vue";
import waterfall from "vue-waterfall2";
Vue.use(waterfall);
import { List, Notify } from "vant";
import apiMar from "@/api/api";
Vue.use(List);
import moment from "moment";
export default {
  components: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,

      goodsList: [],
      total: "",
      pageData: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: [10, 20, 30, 40, 50]
      },
      showFlag: false,
      timeCurrent: moment().format("HH")
    };
  },
  computed: {},
  watch: {},
  methods: {
    getData() {
      let params = {
        current: this.pageData.current,
        pageSize: this.pageData.pageSize
      };
      if (this.$route.query.id) {
        params.active = this.$route.query.id;
      }
      apiMar
        .getGoodsList(params)
        .then(res => {
          this.total = res.total;
          this.goodsList = this.goodsList.concat(res.data);

          this.goodsList.forEach(item => {
            item.url1 = item.image.url;
          });

          if (this.total == this.goodsList.length) {
            this.showFlag = true;
          }
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    },
    goDetails(id, status) {
      this.$router.push({
        path: "/goodDetails",
        query: {
          id: id
        }
      });
      // if (status == 10) {
      //   this.$router.push({
      //     path: "/goodDetails",
      //     query: {
      //       id: id
      //     }
      //   });
      // } else {
      //   Notify({ type: "warning", message: "商品已售。" });
      // }
    },
    scroll(val) {
      // console.log(val, 'scrollscrollscrollscrollscrollscrollscrollscroll');
    },
    loadmore(val) {
      console.log("loadmore");
      // console.log(val, 'loadmoreloadmoreloadmoreloadmoreloadmoreloadmore');
      if (this.total != this.goodsList.length) {
        this.pageData.current = this.pageData.current + 1;
        console.log(this.pageData.current, "valvalvlavlv");
        this.getData();
      }
    }
    // // onLoad() {
    // //   // 异步更新数据
    // //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    // //   setTimeout(() => {
    // //     for (let i = 0; i < 10; i++) {
    // //       this.list.push(this.list.length + 1);
    // //     }

    // //     // 加载状态结束
    // //     this.loading = false;

    // //     // 数据全部加载完成
    // //     if (this.list.length >= 40) {
    // //       this.finished = true;
    // //     }
    // //   }, 1000);
    // },
    // windowScroll() {
    //   let scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   console.log(scrollTop); // 获取到页面滚动的值,
    // }
  },
  created() {
    // this.getData();
    this.getData();
    console.log(this.timeCurrent, "timeCurrenttimeCurrenttimeCurrent");
  },

  mounted() {
    // window.addEventListener("scroll", this.windowScroll); //监听页面滚动
    // this.$refs.checkbox.toggle();
  }
};
</script>
<style lang="scss" scoped>
.goodCon {
  // -moz-column-count: 2;
  // -webkit-column-count: 2;
  // column-count: 2;
  // -moz-column-gap: 0;
  // -webkit-column-gap: 0;
  padding: 10px 15px 80px;

  .noMore {
    text-align: center;
    font-size: 14px;
    color: #999;
    padding: 30px 0;
  }
}

.goodBox {
  // -moz-page-break-inside: avoid;
  // -webkit-column-break-inside: avoid;
  // break-inside: avoid;
  margin: 0 6px 10px;

  img {
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  }

  .boxText {
    p.p1 {
      font-size: 14px;
      color: #333;
      margin: 10px 0 6px;
    }

    p.p2 {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      span {
        display: inline-block;
        font-size: 14px;
        color: #333;
        line-height: 1.4;
        padding-top: 2px;
      }

      em {
        font-size: 12px;
        display: block;
        color: #fff;
        background: rgba(26, 27, 28, 1);
        padding: 4px 10px;
        border-radius: 20px;
        font-style: normal;
      }

      em.curr {
        background: rgba(26, 27, 28, 0.5);
      }
    }
  }
}
</style>
